<template>
	<view>
		<view style="padding: 30rpx;margin: 20rpx;border-radius: 20rpx;background-color: white;">
			<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">标题</view>
					<view style="font-size: 28rpx;">{{swiper.title}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">内容</view>
					<view style="font-size: 28rpx;">{{swiper.introduction}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">联系人</view>
					<view style="font-size: 28rpx;">{{swiper.contact}}</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view style="font-size: 22rpx;color: #909399;">电话</view>
					<view style="font-size: 28rpx;">{{swiper.phone}}</view>
				</view>
			</view>
			<u-swiper height="200" :list="picList" @click="picClick"></u-swiper>


		</view>
		<!-- 拨打电话 -->
		<view class="buttom">
			<view class="callPhone" @click="call(swiper.phone)">
				<u-icon name="phone" size="24" color="#fff"></u-icon>
				<text>拨打电话</text>
			</view>
		</view>
	</view>



</template>

<script>
	import {
		getSwiperDetail
	} from '../../config/api.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				swiper: {},
				picList: []
			}
		},
		onLoad(options) {
			this.id = options.id,
				this.getSwiperDetail()
		},
		computed: {
			...mapGetters(['getBaseUrl']),
		},
		methods: {
			getSwiperDetail() {
				getSwiperDetail({
					id: this.id
				}).then(res => {
					this.swiper = res.data.data;
					this.tempPicList = this.swiper.img.split(",");
					this.picList = this.tempPicList.map((item, index) => {
						return this.getBaseUrl + item
					});
				})
			},
			// 点击图片 -放大
			picClick(i) {
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.picList
				})
			},
			// 打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttom {
		position: fixed; // 固定定位
		flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
		bottom: 0;
		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;

		.callPhone {
			display: flex;
			justify-content: center;
			color: #fff;
			background-color: #20C3FE;
		}
	}
</style>